import { sendNotification } from '@tauri-apps/api/notification'

export function showNotification(title: string, body: string) {
  sendNotification({
    title,
    body
  })
}

export function showAlert(message: string, type: 'info' | 'success' | 'warning' | 'error' = 'info') {
  const alertDiv = document.createElement('div')
  alertDiv.className = `fixed top-4 right-4 p-4 rounded-md shadow-lg z-50 max-w-sm`
  
  const colors = {
    info: 'bg-blue-500 text-white',
    success: 'bg-green-500 text-white',
    warning: 'bg-yellow-500 text-white',
    error: 'bg-red-500 text-white'
  }
  
  alertDiv.className += ` ${colors[type]}`
  alertDiv.innerHTML = `
    <div class="flex items-start">
      <div class="ml-3">
        <p class="text-sm font-medium">${message}</p>
      </div>
      <button onclick="this.parentElement.parentElement.remove()" class="ml-4 text-white hover:text-gray-200">
        <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>
  `
  
  document.body.appendChild(alertDiv)
  
  setTimeout(() => {
    if (alertDiv.parentElement) {
      alertDiv.remove()
    }
  }, 5000)
}

export function confirmDialog(message: string): Promise<boolean> {
  return new Promise((resolve) => {
    const modal = document.createElement('div')
    modal.className = 'fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50'
    modal.innerHTML = `
      <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
        <div class="mt-3 text-center">
          <h3 class="text-lg leading-6 font-medium text-gray-900">确认操作</h3>
          <div class="mt-2 px-7 py-3">
            <p class="text-sm text-gray-500">${message}</p>
          </div>
          <div class="items-center px-4 py-3">
            <button id="confirm-yes" class="px-4 py-2 bg-red-500 text-white text-base font-medium rounded-md w-24 mr-2 hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-300">
              确认
            </button>
            <button id="confirm-no" class="px-4 py-2 bg-gray-300 text-gray-700 text-base font-medium rounded-md w-24 hover:bg-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-300">
              取消
            </button>
          </div>
        </div>
      </div>
    `
    
    document.body.appendChild(modal)
    
    document.getElementById('confirm-yes')?.addEventListener('click', () => {
      modal.remove()
      resolve(true)
    })
    
    document.getElementById('confirm-no')?.addEventListener('click', () => {
      modal.remove()
      resolve(false)
    })
  })
}
